<template>
  <div class="container">
    <filtrate :fetchData="fetchData"></filtrate>
    <div class="content">
      <h4><span style="float: left;color: #20a0ff;cursor: pointer;margin-left:20px;" @click="exportData">导出数据</span>推荐学员数量</h4>
      <div class="sel">
        <span>客户：</span>
        <el-select v-model="value" placeholder="请选择" size="small" @change="handleChange" filterable>
          <el-option v-for="(item,index) in customerList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div id="myChart" style="width:100%;height:600px"></div>
    </div>
  </div>
</template>
<script>
import filtrate from "../filtrate";

export default {
  data() {
    return {
      value: "",
      customerList: [],
      myChart: {},
      option: {
        color: ["#0177BF"],
        title: {
          text: ""
        },
        tooltip: {},
        toolbox: {
          show: true,
          right: 20,
          feature: {
            saveAsImage: {
              //保存图片
              show: true
            }
          }
        },
        legend: {
          data: ["人数"]
        },
        xAxis: {
          name: "月份",
          data: [],
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          name: "单位：人次",
          minInterval: 1
        },

        series: [
          {
            name: "人数",
            type: "line",
            data: [],
            label: {
              normal: {
                show: true,
                position: "top"
              }
            }
          }
        ],

        textStyle: {
          color: "#333"
        }
      }
    };
  },
  components: {
    filtrate
  },
  methods: {
      exportData(){
          let filData = Lockr.get("filData");
          if (filData) {
              var data = {
                  time: filData.time,
                  courseType: filData.courseType
              };
          } else {
              var data = {
                  time:  "",
                  courseType:  ""
              };
          }
          axios.post(PATH + "Dashboard/customerTraineeexport", data).then(res => {
              if(res.data.error == '0'){
                  window.location.href =  SITE1+res.data.msg;
              }else{
                  _g.toastMsg('error',res.data.msg);
              }
          });
      },
    fetchData(time, type) {
      if (this.myChart.showLoading) {
        this.myChart.showLoading("default", { color: "#0177BF" });
      }
      let data = {
        time: time ? time : "",
        courseType: type ? type : "",
        customer: this.value
      };
      axios.post(PATH + "Dashboard/customerTrainee", data).then(res => {
        this.myChart.hideLoading();
        if (!res.data.xaxis.length) {
          _g.toastMsg("normal", "暂无数据");
        }
        let start = 0;
        let rotate = 0;
        if (res.data.xaxis.length > 12) {
          start = 100 - parseInt(12 / res.data.xaxis.length * 100);
          rotate = 40;
        }
        this.myChart.setOption({
          grid: {
            bottom: "15%"
          },
          xAxis: {
            axisLabel: {
              rotate: rotate
            },
            data: res.data.xaxis
          },
          series: [
            {
              data: res.data.yaxis
            }
          ],
          dataZoom: [
            {
              type: "slider",
              start: start,
              end: 100
            }
          ]
        });
      });
    },
    drawChart() {
      this.myChart = this.$echarts.init(document.querySelector("#myChart"));
      this.myChart.setOption(this.option);
    },
    handleChange() {
      let filData = Lockr.get("filData");
      if (filData) {
        this.fetchData(filData.time, filData.courseType);
      } else {
        this.fetchData();
      }
    }
  },
  created() {
    axios.post(PATH + "System/customerLists").then(res => {
      this.customerList = res.data;
      this.value = res.data[0].id;
      let filData = Lockr.get("filData");
      if (filData) {
        this.fetchData(filData.time, filData.courseType);
      } else {
        this.fetchData();
      }
    });
  },
  mounted() {
    this.drawChart();
    this.myChart.showLoading("default", { color: "#0177BF" });
    this.myChart.on("click", params => {
      let customer = "";
      this.customerList.forEach(ele => {
        if(ele.id == this.value){
          customer = ele.name;
        }
      });
      router.push("/dashboard/customerTraineeDetail/" + customer + '/' + params.name);
    });
  }
};
</script>
<style scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  font-size: 14px;
  overflow: hidden;
}
.content > h4 {
  text-align: center;
  border-bottom: 1px solid #f0f2f3;
  line-height: 40px;
}
.content .sel {
  width: 800px;
  padding-left: 55px;
  box-sizing: border-box;
  margin: 0px auto;
  margin-top: 40px;
}
#myChart {
  margin: 10px auto;
}
</style>
